<template>
	<!-- 新增 -->
	<el-dialog
		:title="title"
		:visible.sync="dialog"
		width="450px">
		<!-- 内容 -->
		<el-form
			:model="ruleForm"
			:rules="rules"
			ref="ruleForm"
			label-width="80px"
			class="new">
			<div class="group">
				<el-form-item label="应用平台" prop="market">
					<el-select
						:disabled="title == '查看协议'?true:false"
						style="width:100%"
						v-model="ruleForm.value_market"
						placeholder="请选择">
						<el-option
							v-for="item in ruleForm.list_market"
							:key="item.value"
							:label="item.label"
							:value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
			</div>
			<div class="group">
				<el-form-item label="协议名称" prop="name">
					<el-input v-model="ruleForm.name" :disabled="title == '查看协议'?true:false"></el-input>
				</el-form-item>
			</div>
			<div class="group">
				<el-form-item label="协议内容" prop="text">
					<el-input type="textarea" v-model="ruleForm.text" :disabled="title == '查看协议'?true:false"></el-input>
				</el-form-item>
			</div>
		</el-form>
		<!-- 提交 -->
		<div class="flex flex-end" v-if="title != '查看协议'">
			<div class="btn">
				<el-button
					@click="dialog = false"
					size="small">取消
				</el-button>
			</div>
			<div class="btn">
				<el-button
					type="primary"
					@click="submit()"
					size="small">确定
				</el-button>
			</div>
		</div>
	</el-dialog>
</template>

<script>
export default {
	props:["ifShow","title","formData"],
	watch:{
		ifShow(val){
			//清空数据
			this.ruleForm.name = '';
			this.ruleForm.text = '';
			this.ruleForm.value_market = '2';
			//显示弹窗
			this.dialog = true;
			if(this.formData && this.title != '新增协议'){
				this.ruleForm.name = this.formData.protocolName; //协议名称
				this.ruleForm.text = this.formData.protocolContent; //协议内容
				this.ruleForm.value_market = this.formData.ruleType + ''; //应用平台
			}
		},
	},
	data() {
		return {
			dialog:false,
			ruleForm:{
				name:"",
				text:"",
				value_market:'2',
				list_market:[
					{
						value:'2',
						label:'全部'
					},
					{
						value:"0",
						label:'砂锅号'
					},
					{
						value:'1',
						label:'砂锅问答'
					},
				]
			},
			rules:{
				name:[
					{
						required: true,
						message: '不能为空',
						trigger: 'blur' ,
					},
					{
						max: 20,
						message: '不能超过20个字符',
						trigger: 'blur' ,
					}
				],
			}
		};
	},
	methods:{
		//提交
		submit:function(){
			this.$refs.ruleForm.validate(valid => {
				//新增
				if(this.title == '新增协议'){
					this.newData();
				}
				//编辑
				else{
					this.editData();
				}
			})
		},
		//新增
		newData:function(){
			HTTP('rule_add', {
				ruleType:this.ruleForm.value_market,
				protocolName:this.ruleForm.name,
				protocolContent:this.ruleForm.text,
				status:0
			})
			.then(res=>{
				if(res.code == 200){
					this.common.msg('操作成功');
					this.dialog = false;
					this.$emit('newOK',1);
				}
				else{
					this.common.msg(res.msg,'error');
				}
			})
		},
		//编辑
		editData:function(){
			HTTP('rule_modif', {
				uid:this.formData.uid,
				ruleType:this.ruleForm.value_market,
				protocolName:this.ruleForm.name,
				protocolContent:this.ruleForm.text,
				status:0
			})
			.then(res=>{
				if(res.code == 200){
					this.common.msg('操作成功');
					this.dialog = false;
					this.$emit('newOK',1);
				}
				else{
					this.common.msg(res.msg,'error');
				}
			})
		}
	}
};
</script>

<style lang="scss" scoped>
	// 饿了么样式
	/deep/ .el-dialog__header{
		text-align: center;
	}
	/deep/ .el-textarea__inner{
		height: 100px;
	}
	//弹窗
	.new{
		.group{
			width: 90%;
			margin: 0 auto;
		}
	}
	.btn{
		margin-right: 20px;
	}
</style>
